babel macro 是修改 AST 的一种新的方式,其实和 babel plugin 差别不大,会了 plugin,macro 也就会了。
这节我们来探究一下 babel macro。
# babel macro 介绍
babel macro 是通过在源码中引入 macro 模块,在要转换的地方调用相应的 api,macro 内部会拿到相应的 ast,然后进行转换的一种方式。
比如源码为:
const files = require('../macros/files.macro');
console.log('src files:');
console.log(files('../src'));
console.log('macro files:');
console.log(files('../macros'));
@前端进阶之旅: 代码已经复制到剪贴板
目标代码为:
console.log('src files:');
console.log(["index.js", "sourceCode.js"]);
console.log('macro files:');
console.log(["files.macro.js"]);
@前端进阶之旅: 代码已经复制到剪贴板
如果我们写插件,那么就是通过 visitor 找到 files 的函数调用,然后执行 fs.readdirSync 查询出文件列表,之后替换该处的 ast 为 StringLiteral 的数组。
那如果用 macro 怎么写呢?
也是一样的思路,只不过 macro 不需要 visitor,而是直接能找到调用 macro 的对应的 ast,之后进行修改。
下面我们来实现一下上面的 macro。
# babel macro 实例
babel macro 的功能是通过插件实现的,所以要启用 macro,要先引入 babel-plugin-macros 插件。
